<template>
    <div class="background" :style="{backgroundImage:`url(${img})`}">
        <div class="sign_box">
            <Card style="height:100%">
                <p slot="title">登录</p>
                <div style="text-align: center;">
                    <i-input
                        v-model="username"
                        prefix="ios-contact"
                        placeholder="输入用户名"
                        style="width: 95%; margin-top:5%;margin-bottom:5%"
                    />
                    <i-input
                        v-model="password"
                        prefix="ios-lock"
                        type='password'
                        password
                        placeholder="输入密码"
                        style="width: 95%; margin-bottom:5%"
                    />
                    <Button type="primary" style="width: 95%" @click="login">登录</Button>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name:'sign_in',
  data() {
    return {
      img: require("../assets/bg1-4.jpg"),
      username:'',
      password:'',
    };
  },
  methods:{
     ...mapActions(["handleLogin"]),
     login(){
      let username = this.username;
      let password = this.password;
       this.handleLogin({ username, password }).then(msg => {
        if (msg === "success") {
          this.$Message.success("登陆成功");
          this.$router.go(-1)
        } else {
          this.$Message.error(msg);
        }
      });
     }
  }
};
</script>

<style scoped>
.background {
  height: 100vh;
  width: 100vw;
}

.sign_box {
  background-color: #ffffff;
  border-radius: 4px;
  height: 30vh;
  width: 17vw;
  position: absolute;
  right: 10vw;
  top: 50%;
  transform: translateY(-60%);
}
</style>